import './vue' // 引入vue
import './style.scss' // 引入样式
import './transition.css' // 过渡引入样式

// console.log(111)
// 实例化vue
const app = new Vue({
  el: '#app',
  data: {
    con: [
      {
        userName: '永不上线',
        userRemark: '新增删除广播功能。',
        time: new Date(2024, 6, 5, 15, 14) / 1000,
        id: new Date(2024, 6, 5, 15, 14) / 1000,
        userHeadImage: 0
      },
      {
        userName: '永不上线',
        userRemark: '新增Ctrl+Enter快捷键发送广播。',
        time: new Date(2024, 6, 5, 12, 20) / 1000,
        id: new Date(2024, 6, 5, 12, 20) / 1000,
        userHeadImage: 1
      },
      {
        userName: '永不上线',
        userRemark: '新增选择头像功能。',
        time: new Date(2024, 6, 5, 12, 8) / 1000,
        id: new Date(2024, 6, 5, 12, 8) / 1000,
        userHeadImage: 2
      },
      {
        userName: '永不上线',
        userRemark: '增加了记录广播时间的功能',
        time: new Date(2024, 6, 4, 16, 55) / 1000,
        id: new Date(2024, 6, 4, 16, 55) / 1000,
        userHeadImage: 3
      },
      {
        userName: '永不上线',
        userRemark: '增加了输入字符检测功能，英文/半角为半个字符，汉字/全角为一个字符。',
        time: new Date(2024, 6, 4, 8, 30) / 1000,
        id: new Date(2024, 6, 4, 8, 30) / 1000,
        userHeadImage: 4
      },
      {
        userName: '永不上线',
        userRemark: '仿腾讯微博效果，欢迎大家测试！',
        time: new Date(2024, 6, 3, 20, 19) / 1000,
        id: new Date(2024, 6, 3, 20, 19) / 1000,
        userHeadImage: 5
      }
    ], // 初始的评论数据
    form: {
      userName: '',
      userRemark: '',
      userHeadImage: 0
    }, // 表单绑定
    pop: {
      msg: '',
      isShow: false
    }, // 弹窗信息
  },
  methods: {
    // 将事件戳转换成 常用时间格式
    format (time) {
      const date = new Date(time)
      // console.log(date)
      const m = String(date.getMonth() + 1).padStart(2, '0')
      const d = String(date.getDate()).padStart(2, '0')
      const h = String(date.getHours()).padStart(2, '0')
      const minu = String(date.getMinutes()).padStart(2, '0')
      // console.log(m, d, h, minu)
      return m + '月' + d + '日 ' + h + ':' + minu
    },
    // 发送
    onSend () {
      // 验证表单
      if (this.form.userName === '') {
        this.pop = {
          msg: '用户名不能为空白！',
          isShow: true
        }
        return
      } else if (this.form.userName.length < 2 || this.form.userName.length > 8) {
        this.pop = {
          msg: '用户名的长度为2-8位！',
          isShow: true
        }
        return
      }
      if (this.form.userRemark === '') {
        this.pop = {
          msg: '随便评论点什么吧！',
          isShow: true
        }
        return
      } else if (this.form.userRemark.length > 140) {
        this.pop = {
          msg: '评论字数超过限制啦！',
          isShow: true
        }
        return
      }
      // console.log(this.form)
      // 添加数据
      this.con.unshift({
        ...this.form,
        time: Date.now() / 1000,
        id: Date.now() / 1000
      })
      // 重置表单
      this.form.userName = ''
      this.form.userRemark = ''
    },
    // 删除
    del (index) {
      this.con.splice(index, 1)
    }
  },
  computed: {
    // 输入的评论字数
    remarkLength() {
      return this.form.userRemark.length
    }
  },
  mounted () {
    // 给document绑定键盘事件
    document.addEventListener('keydown', (e) => {
      if (e.ctrlKey && e.keyCode === 13) {
        this.onSend()
      }
    })
  }
})
